<script setup lang="ts">
import {onMounted, ref} from "vue";
import router from "@/router/index.js";

import {deleteProjectAPI, getProjectListAPI} from "@/apis/projectInfo.js";
import {ElMessage, ElMessageBox} from "element-plus";

const current=ref(1);
const pageSize=ref(100);
const projectList=ref([]);

onMounted(async ()=>{
 const res=  await  getProjectListAPI(current.value,pageSize.value);
  projectList.value=res.data;
})

const getProjectInfo=async (id:number)=>{
  await router.push({path:`/manage/projectDetail/${id}`});
}
const updateProjectInfo=async (id:number)=>{
  await router.push({path:`/manage/projectUpdate/${id}`});
}

const deleteProject=async (id:number)=>{
  await ElMessageBox.confirm(
      '此操作将删除该项目, 是否继续?',
      'warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    await deleteProjectAPI(id);

    /*
    * 数据过滤：借助 Array.filter 方法，从 userList 里过滤掉 id 与要删除用户 id 相同的项。
更新视图：把过滤后的新数组赋值给 userList.value，由于 userList 是响应式引用，表格视图会自动更新。
通过这种方式，在删除数据后表格视图能实时更新，且避免了刷新整个页面带来的性能损耗和用户体验问题。
    * */
    projectList.value = projectList.value.filter((project: any) => project.id !== id);
    ElMessage({
      type: 'success',
      message: '删除成功!',
    })

  })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        })
      })

}



</script>

<template>
  <el-table
      :data="projectList"
      style="width: 100%"
      stripe
      border
      max-height="800"
      :default-sort="{prop:'updateTime',order:'descending',}"
  >
    <el-table-column prop="id" fixed label="项目ID" width="100" />

    <el-table-column prop="name" fixed label="项目名称" width="230" />

    <el-table-column prop="contact" label="联系人" width="100" />

    <el-table-column prop="phone" label="联系电话" width="135" />

    <el-table-column prop="address" label="项目地址" width="230" />

    <el-table-column  label="操作" width="220" fixed="right">
      <!--  在操作这一栏，添加一个template元素，加一个#default属性，通过这个属性，获取到这一行的数据，是个对象
                   scope：就是el-table表格中被选中的那一行的数据，通过scope获取到该行的数据-->
      <template #default="scope">
        <!--        <el-button size="small" type="warning" plain  @click="router.push({path:`/home/equipment/equipmentDetail/${scope.row.id}`});">详情</el-button>-->
        <el-button size="small" type="warning" plain  @click="getProjectInfo(scope.row.id)">详情</el-button>
        <el-button size="small" type="warning" plain  @click="updateProjectInfo(scope.row.id)">修改</el-button>
        <el-button size="small" type="warning" plain  @click="deleteProject(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">

</style>